<script lang="ts">
import {defineComponent, ref, toRefs, reactive, unref} from 'vue';
import {User, Unlock, Key} from "@element-plus/icons-vue";
import router from "/@/router";
import {ElMessage} from "element-plus";
import PolicyDialog from "./PolicyDialog.vue"

export default defineComponent({
  name: 'LoginPage',
  components: {User, Unlock, PolicyDialog, Key},
  setup() {
    const formRef = ref(null);
    const policyDialogRef = ref(null);
    const name = ref("jackieChen");
    const state = reactive({
      logoIcon: import.meta.env.VITE_LOGO,
      formData: {
        username: null,
        password: null,
        code: null,
        policy: 0
      },
      formRules: {
        username: [
          {required: true, trigger: "blur", message: "输入账号或手机号"}
        ],
        password: [
          {required: true, trigger: "blur", message: "输入登录口令"}
        ],
        policy: [
          {required: true, trigger: "blur", message: "请阅读并同意相关协议及政策"}
        ]
      },
    });
    const handleLogin = () => {
      if (!state.formData.policy) {
        ElMessage.error("请阅读并同意相关协议及政策");
        return;
      }
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          router.push('/jim')
        }
      });
    }
    const goRegister = () => {
      router.push('/register')
    }

    const showPolicy = (_type: string) => {
      policyDialogRef.value.openDialog(_type);
    }
    return {
      policyDialogRef,
      formRef,
      name,
      handleLogin,
      goRegister,
      showPolicy,
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="login-container">
    <div class="login-wrap">
      <div class="logo">
        <el-image :src="logoIcon"/>
        <span class="color-font">网页版-登录</span>
      </div>
      <el-form ref="formRef" class="form-style" :model="formData" size="large" :rules="formRules">
        <el-form-item prop="username">
          <el-input
              clearable
              v-model="formData.username"
              autocomplete="off"
              placeholder="输入账号或手机号">
            <template #prefix>
              <el-icon>
                <User/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" placeholder="输入登录口令" clearable>
            <template #prefix>
              <el-icon>
                <Unlock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div class="verify-wrap">
            <el-input v-model="formData.code" type="text" placeholder="输入验证码" style="width: ">
              <template #prefix>
                <el-icon>
                  <Key/>
                </el-icon>
              </template>
            </el-input>
            <el-image class="captcha-pic cur-pointer" :src="captchaSrc" @click="getCaptcha"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleLogin" type="primary" style="width: 100%">登录</el-button>
        </el-form-item>
        <div class="policy-wrap">
          <el-checkbox v-model="formData.policy" style="margin-right: 10px;"/>
          <span>阅读并同意<b class="color-primary pointer" @click="showPolicy('user')">《JIM隐私协议》</b>和<b
              @click="showPolicy('duty')" class="color-primary pointer">《JIM免责声明》</b></span>
        </div>
      </el-form>
      <div class="common-act">
        <span class="color-font pointer" @click="goRegister">注册账号</span>
      </div>
    </div>
    <PolicyDialog ref="policyDialogRef"/>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

  .login-wrap {
    width: 500px;
    min-height: 480px;
    background-color: rgba(255, 255, 255, 0.9);
    //border-radius: 16px;
    padding: 40px 60px;

    .logo {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      flex-direction: row;
      justify-content: center;

      .el-image {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }

      span {
        font-size: 24px;
        font-weight: bold;
      }
    }

    .verify-wrap {
      display: flex;
      align-items: center;
      width: 100%;
      flex-direction: row;
      justify-content: space-around;

      .captcha-pic {
        width: 140px;
        height: 40px;
        margin-left: 5px;
        border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
      }
    }

    .policy-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: baseline;
      color: #5d5d5d;
    }

    .form-style {
      width: 100%;
    }

    .common-act {
      text-align: center;
      color: var(--el-color-primary);
      padding-top: 20px;
    }
  }
}
</style>
